<template>
  <div class="main">
    <van-nav-bar title="查看"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="content2">
      <div class="header">
        <h2>{{ titleName }}</h2>
      </div>
      <div class="list">
        <div class="tabline">
          <van-tabs type="card"
                    @click="handleChangePage"
                    color="#35b8d4">
            <van-tab :title="'未读预警' + weidu">
              <!-- 循环 -->
              <div v-for="item in dataList"
                   :key="item.uuid">
                <div class="infoItem">
                  <p>预警时间：{{ item.recordTime }}</p>
                  <p>
                    <span>监控层面{{ item.riskType }}</span>
                    <span>具体内容如下：</span>
                  </p>
                  <div class="content"
                       @click="handleView(item)">
                    <p>{{ item.tip }}
                    </p>
                    <van-icon class="more"
                              name="arrow-down" />
                  </div>
                </div>
              </div>
              <!-- end -->
            </van-tab>
            <van-tab :title="'已读预警' + yidu">
              <!-- 循环 -->
              <div v-for="item in dataList2"
                   :key="item.uuid">
                <div class="infoItem">
                  <p>预警时间：{{ item.recordTime }}</p>
                  <p>
                    <span>监控层面{{ item.riskType }}</span>
                    <span>具体内容如下：</span>
                  </p>
                  <div class="content"
                       @click="handleView(item)">
                    <p>{{ item.tip }}
                    </p>
                    <van-icon class="more"
                              name="arrow-down" />
                  </div>
                </div>
              </div>
              <!-- end -->
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetInfo, SetRead } from '@/api/faq1'
import { Dialog } from 'vant'
import { v4 as uuidv4 } from 'uuid'

export default {
  data() {
    return {
      weidu: 0,
      yidu: 0,
      dialogShow: false,
      showContent: '',
      titleName: this.$route.query.enterpriseName,
      dataList: [],
      dataList2: [],
      currentTabsPage: {}
    }
  },
  mounted() {
    GetInfo({ enterpriseName: this.titleName, type: 0 }).then(res => {
      console.log('res===', res)
      this.dataList = res
      this.weidu = this.dataList.length
    })
    GetInfo({ enterpriseName: this.titleName, type: 1 }).then(res2 => {
      console.log('res2===', res2)
      this.dataList2 = res2
      this.yidu = this.dataList2.length
    })
  },
  methods: {
    onClickLeft() {
      this.$router.push('/')
    },
    handleCheck(data) {
      console.log('data===', data)
    },
    handleView(data) {
      console.log('data===', data)
      Dialog.alert({
        title: '查看',
        messageAlign: 'left',
        message: data.tip
      }).then(() => {
        if (this.currentTabsPage.name != 1) {
          console.log('已读===')
          SetRead({ id: data.id }).then(res => {
            console.log('已读===', data.id)
            this.$router.go(0)
          })
        }
        // on close
      })
    },
    handleChangePage(name, title) {
      console.log('name,title===', name, title)
      this.currentTabsPage = {
        name: name,
        title: title
      }
      if (name == 0) {
        GetInfo({ enterpriseName: this.titleName, type: 0 }).then(res => {
          console.log('res===', res)
          this.dataList = res
          this.weidu = this.dataList.length
        })
      } else if (name == 1) {
        GetInfo({ enterpriseName: this.titleName, type: 1 }).then(res => {
          console.log('res===', res)
          this.dataList2 = res
          this.yidu = this.dataList2.length
        })
      }
    }
  }
}
</script>

<style scoped>
.main {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: block;
  width: 100%;
  margin: 0 auto;
}
.content2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 10px;

  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}
.header {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* border: 1px solid #0f0; */
}
.header h2 {
  font-size: 20px;
  color: #5ba1b2;
}
.list {
  width: 98%;
}
div >>> .van-tabs__wrap {
  width: 100%;
  border-bottom: 1px dotted #999;
}
.infoItem {
  width: 100%;
  height: 120px;
  padding-top: 10px;
  border-bottom: 1px dotted #5ba1b2;
}
.infoItem p {
  font-size: 14px;
}
.infoItem p:nth-child(2) {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.content {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content p {
  color: #999;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.more {
  font-size: 12px;
}
div /deep/ .van-dialog__message {
  text-align: left;
}
div /deep/ .van-dialog__message--has-title {
  text-align: left;
}
.dialogstyle >>> .van-dialog__message {
  color: #f00;
}
</style>

